<template>
  <x-breadcrumb :content-list="contentList"></x-breadcrumb>
  <!-- 卡片视图区域 -->
  <el-card class="mt-3">
    <!-- 2. 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 100%;height:500px;"></div>
  </el-card>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import { MessageFunc } from '@/utils/ElMessageFunc'
import axios from 'axios'
import XBreadcrumb, { contentType } from '@/components/public-components/XBreadcrumb.vue'
import * as echarts from 'echarts';
import _ from 'lodash'

// 需要合并的数据
const options = {
  title: {
    text: '用户来源'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#E9EEF3'
      }
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      boundaryGap: false
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ]
}

const contentList: contentType[] = ['首页', '数据统计', '数据报表']

export default defineComponent({
  name: 'Reports',
  components: {
    XBreadcrumb
  },
  setup () {
    onMounted(async () => {
      var myChart = echarts.init(document.getElementById('main') as HTMLElement)

      const res = await axios.get('reports/type/1')
      if (res.data.meta.status !== 200) MessageFunc('error', '获取折线图数据失败！')
      const result = _.merge(res.data.data, options)
      console.log(result)
      myChart.setOption(result)

    })
    return { contentList }
  }
})
</script>
